<template>
  <view class="app-container">
    <uni-popup ref="popup" type="dialog">
      <number-modal
        :defaultNumbers="
          listQuery.searchKey ? listQuery.searchKey.split(',') : []
        "
        @search="onNumbersChange"
        @close="onCloseNumberModal"
      ></number-modal>
    </uni-popup>
    <view class="title-padding" ref="titlePadding"></view>
    <view class="tabs">
      <view class="inner-card-background">
        <view class="tab-bar-container">
          <scroll-view
            id="tab-bar"
            class="scroll-h"
            ref="tabBar"
            :scroll-x="false"
          >
            <view
              v-for="(tab, index) in tabBars"
              :key="tab.id"
              class="uni-tab-item"
              :id="tab.id"
              :data-current="index"
              @tap="ontabtap"
            >
              <text
                :class="
                  tabIndex === index
                    ? 'uni-tab-item-title uni-tab-item-title-active'
                    : 'uni-tab-item-title'
                "
              >
                {{ tab.name }}
              </text>
            </view>
            <button
              v-if="tabIndex !== 2"
              class="cu-btn round text-center fr search-btn"
              @tap="onShowNumberModal"
            >
              搜索
            </button>
            <button
              v-if="tabIndex === 2"
              class="cu-btn round bg-blue text-white text-center fr create-btn"
            >
              创建方案
            </button>
          </scroll-view>
        </view>
      </view>
      <view class="swiper-box">
        <view v-show="tabIndex === 0" class="swiper-item" :key="0">
          <scroll-view class="scroll-v" scroll-y @scroll="onScroll">
            <view class="lottery-numbers-card-container">
              <lottery-numbers-card
                class="top-numbers-result"
                :numbers="lotteryNumbers"
                :no="lotteryNo"
                :index="34"
                ref="lotteryNumbersCard"
              ></lottery-numbers-card>
            </view>
            <view
              class="pickers-filter-bar flex align-center justify-between"
              ref="pickersFilterBar"
            >
              <view class="left-area">
                <picker
                  mode="multiSelector"
                  @columnchange="onMaColChange"
                  :value="maChooseList"
                  :range="maCategoryList"
                  range-key="name"
                >
                  <view>{{ maCategoryList[0][maChooseList[0]].name }}</view>
                </picker>
                <view class="picker-suffix-icon">
                  <image mode="widthFix" src="../../static/form/choose.png" />
                </view>
              </view>
              <view class="right-area">
                <picker
                  mode="multiSelector"
                  @columnchange="onCateChange"
                  :value="cateChooseList"
                  :range="cpCategoryList"
                  range-key="name"
                >
                  <view>
                    {{ cpCategoryList[0][cateChooseList[0]].name }}
                    {{ cpCategoryList[1][cateChooseList[1]].name }}
                  </view>
                </picker>
                <view class="picker-suffix-icon">
                  <image mode="widthFix" src="../../static/form/choose.png" />
                </view>
              </view>
            </view>
            <view class="filter-tab-bar-container">
              <!-- 这里之所以要再包一层的原因是当filter-tab-bar变成fixed后还可以保有这部分当空间 不至于让下面的容器往上顶 -->
              <filter-tab-bar
                :tabs="tabsData"
                @ontap="onOtherFilterTabChange"
                class="affix-filter-tab bg-white"
                align="left"
                ref="filter1"
              ></filter-tab-bar>
            </view>

            <view class="card-list">
              <load-more-container
                :query="listQuery"
                :trigger="anyTrigger"
                :getList="query => getAnyList(query)"
              >
                <template #default="{list}">
                  <loveable-k-card
                    :index="index"
                    :data="item"
                    v-for="(item, index) in list"
                    :key="index"
                    :numbers="item.zuhe ? item.zuhe.split(',') : []"
                    :reds="
                      item.zuhe_process ? pickRenReds(item.zuhe_process) : []
                    "
                    @refresh="
                      () => {
                        this.anyTrigger = !this.anyTrigger
                      }
                    "
                  ></loveable-k-card>
                </template>
              </load-more-container>
            </view>
          </scroll-view>
        </view>
        <view v-show="tabIndex === 1" class="swiper-item" :key="1">
          <scroll-view class="scroll-v" scroll-y @scroll="onScroll">
            <view class="lottery-numbers-card-container">
              <lottery-numbers-card
                class="top-numbers-result"
                :numbers="lotteryNumbers"
                :no="lotteryNo"
                :index="34"
              ></lottery-numbers-card>
            </view>

            <view
              class="pickers-filter-bar flex align-center justify-between"
              ref="pickersFilterBar"
            >
              <view class="left-area">
                <picker
                  mode="multiSelector"
                  @columnchange="onDanColChange"
                  :value="danChooseList"
                  :range="danCategoryList"
                  range-key="name"
                >
                  <view>
                    {{ danCategoryList[0][danChooseList[0]].name }}
                    {{ danCategoryList[1][danChooseList[1]].name
                    }}{{ danCategoryList[2][danChooseList[2]].name }}
                  </view>
                </picker>
                <view class="picker-suffix-icon">
                  <image mode="widthFix" src="../../static/form/choose.png" />
                </view>
              </view>
              <view class="right-area">
                <picker
                  mode="multiSelector"
                  @columnchange="onCateChange"
                  :value="cateChooseList"
                  :range="cpCategoryList"
                  range-key="name"
                >
                  <view>
                    {{ cpCategoryList[0][cateChooseList[0]].name }}
                    {{ cpCategoryList[1][cateChooseList[1]].name }}
                  </view>
                </picker>
                <view class="picker-suffix-icon">
                  <image mode="widthFix" src="../../static/form/choose.png" />
                </view>
              </view>
            </view>
            <view class="filter-tab-bar-container">
              <!-- 这里之所以要再包一层的原因是当filter-tab-bar变成fixed后还可以保有这部分当空间 不至于让下面的容器往上顶 -->
              <filter-tab-bar
                :tabs="tabsData"
                @ontap="onOtherFilterTabChange"
                class="affix-filter-tab bg-white"
                align="left"
                ref="filter1"
              ></filter-tab-bar>
            </view>
            <view class="card-list">
              <load-more-container
                :query="listQuery"
                :trigger="braveTrigger"
                :getList="query => getBraveList(query)"
              >
                <template #default="{list}">
                  <dan-loveable-k-card
                    :index="index"
                    :data="item"
                    v-for="(item, index) in list"
                    :key="index"
                    :dan="item.dan"
                    :tuo="item.tuo ? item.tuo.split(',') : []"
                    :reds="
                      item.tuo_process ? pickTuoReds(item.tuo_process) : []
                    "
                    @refresh="
                      () => {
                        this.braveTrigger = !this.braveTrigger
                      }
                    "
                  ></dan-loveable-k-card>
                </template>
              </load-more-container>
            </view>
          </scroll-view>
        </view>
        <view v-show="tabIndex === 2" class="swiper-item" :key="2">
          <scroll-view class="scroll-v" scroll-y @scroll="onScroll">
            <view class="lottery-numbers-card-container">
              <lottery-numbers-card
                class="top-numbers-result"
                :numbers="lotteryNumbers"
                :no="lotteryNo"
                :index="34"
              ></lottery-numbers-card>
            </view>
            <view class="filter-tab-bar-container">
              <filter-tab-bar
                @ontap="onPlanFilterTabChange"
                class="affix-filter-tab bg-white"
                align="left"
                ref="filter3"
              ></filter-tab-bar>
            </view>
            <view class="card-list">
              <load-more-container
                v-show="currentShowPlanSchemIndex === 0"
                :getList="
                  ({ per_page, page }) => getPlanSchemeList({ page, status: 1 })
                "
              >
                <template #default="{list}">
                  <programme-card
                    v-for="(item, index) in list"
                    :detail="item"
                    :key="index"
                    class="programme-card"
                    @check="handleCheck"
                  ></programme-card>
                </template>
              </load-more-container>
              <load-more-container
                v-show="currentShowPlanSchemIndex === 1"
                :getList="
                  ({ per_page, page }) => getPlanSchemeList({ page, status: 2 })
                "
              >
                <template #default="{list}">
                  <programme-card
                    v-for="(item, index) in list"
                    :detail="item"
                    :key="index"
                    class="programme-card"
                    @check="handleCheck"
                  ></programme-card>
                </template>
              </load-more-container>
              <load-more-container
                v-show="currentShowPlanSchemIndex === 2"
                :getList="
                  ({ per_page, page }) => getPlanSchemeList({ page, status: 3 })
                "
              >
                <template #default="{list}">
                  <programme-card
                    v-for="(item, index) in list"
                    :detail="item"
                    :key="index"
                    class="programme-card"
                    @check="handleCheck"
                  ></programme-card>
                </template>
              </load-more-container>
            </view>
          </scroll-view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import LotteryNumbersCard from '@/components/lotteryNumbersCard/card.vue'
import FilterTabBar from '@/components/affixTabBar/tabbar.vue'
import LoveableKCard from '@/components/loveableKCard/card.vue'
import DanLoveableKCard from '@/components/loveableKCard/danCard.vue'
import ProgrammeCard from '@/components/programme-card/base-with-user.vue'
import NumberModal from '@/components/filterModal/numberModal.vue'
import LoadMoreContainer from '@/components/load-more-container/load-more-container.vue'
import { getHjhm } from '@/api/lottery.js'
import {
  tabConst1,
  categoryConst1,
  categoryConst2,
  tuo4ListConst,
  tuo3ListConst,
  tuo2ListConst,
  ma8ListConst,
  ma7ListConst,
  ma6ListConst,
  ma5ListConst,
  ma4ListConst,
  ma3ListConst,
  ma2ListConst,
  ma1ListConst,
} from '@/consts/index.js'
import { getAnyList, getBraveList, getPlanSchemeList } from '@/api/any.js'
import { getCaipiaoCategoryList } from '@/api/common'
import UniPopup from '@/components/uni-popup/uni-popup.vue'

export default {
  components: {
    LotteryNumbersCard,
    FilterTabBar,
    LoveableKCard,
    ProgrammeCard,
    DanLoveableKCard,
    NumberModal,
    UniPopup,
  },
  data() {
    return {
      cateChooseList: [0, 0],
      maChooseList: [6, 0],
      danChooseList: [0, 0, 0],
      maCategoryList: categoryConst1,
      danCategoryList: categoryConst2,
      cpCategoryList: [
        [
          {
            name: '江苏',
            id: '1',
          },
        ],
        [
          {
            name: '50期',
            id: 50,
          },
        ],
      ],
      tabsData: tabConst1,
      tabIndex: 0,
      tabBars: [
        {
          name: '任选组合',
          id: 'any',
        },
        {
          name: '胆拖组合',
          id: 'brave',
        },
        {
          name: '方案大厅',
          id: 'plans',
        },
      ],
      pageList: [
        {
          name: '任选组合',
          id: 'any',
        },
        {
          name: '胆拖组合',
          id: 'brave',
        },
        {
          name: '方案大厅',
          id: 'plans',
        },
      ],
      lotteryNumbers: [],
      lotteryNo: '',
      numberModalVisible: false,
      anyDataList: [],
      anyTrigger: false,
      braveDataList: [],
      braveTrigger: false,
      listQuery: {
        caipiao_id: 22,
        qihao: 50,
        maQuantity: 7,
        maChu: '4',
        dan: '1',
        tuo: '4',
        chu: '1_2_3_4',
        orderField: 'chu',
        searchKey: undefined,
      },
      currentShowOtherSchemIndex: 0,
      currentShowPlanSchemIndex: 0,
    }
  },
  onShow() {
    this.getLotteryNumbers()
    this.getCateList()
    this.lotteryNumbersCardHeight = null
    this.pickersFilterBarHeight = null

    const Direction = {
      portrait: 'portrait-primary',
      landscape: 'landscape-primary',
    }

    try {
      plus.screen.lockOrientation(Direction.portrait)
    } catch (err) {}
  },
  mounted() {
    this.$nextTick(() => {
      this.lotteryNumbersCardHeight = this.$refs.lotteryNumbersCard.$el.offsetHeight
      this.pickersFilterBarHeight = this.$refs.pickersFilterBar.$el.offsetHeight
    })
  },
  methods: {
    ontabtap(e) {
      let index = e.target.dataset.current || e.currentTarget.dataset.current
      this.switchTab(index)
      this.getCateList()
    },
    onShowNumberModal() {
      this.$refs.popup.open()
    },
    onCloseNumberModal(e) {
      this.$refs.popup.close()
    },
    ontabchange(e) {
      let index = e.target.current || e.detail.current
      this.switchTab(index)
      if (index === 0) {
        this.anyTrigger = !this.anyTrigger
      } else if (index === 1) {
        this.braveTrigger = !this.braveTrigger
      } else if (index === 2) {
        // this.getAnyDataList()
      }
    },
    switchTab(index) {
      if (this.tabIndex === index) {
        return
      }
      this.tabIndex = index
    },
    getLotteryNumbers() {
      getHjhm().then(res => {
        if (res.code === 1 && res.data) {
          this.lotteryNo = res.data.h_qihao
          try {
            this.lotteryNumbers = res.data.h_haoma.split(',')
          } catch (err) {
            this.lotteryNumbers = []
          }
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none',
          })
        }
      })
    },
    getCateList() {
      getCaipiaoCategoryList().then(res => {
        if (res.code === 1 && res.data) {
          let resList = []
          resList = res.data.map(data => {
            return {
              id: data.c_id,
              name: data.c_name,
            }
          })
          this.$set(this.cpCategoryList, 0, resList)
          this.$set(this.cpCategoryList, 1, [
            { value: 50, name: '50期' },
            { value: 100, name: '100期' },
            { value: 200, name: '200期' },
            { value: 400, name: '400期' },
            { value: 1000, name: '1000期' },
            { value: 2000, name: '2000期' },
            // { value: 5000, name: '5000期' },
          ])
          this.listQuery.caipiao_id = this.cpCategoryList[0][
            this.cateChooseList[0]
          ].id
          this.listQuery.qihao = this.cpCategoryList[1][
            this.cateChooseList[1]
          ].value
          this.anyTrigger = !this.anyTrigger
          this.braveTrigger = !this.braveTrigger
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none',
          })
        }
      })
    },
    getAnyList({
      page,
      caipiao_id,
      qihao,
      maQuantity,
      maChu,
      orderField,
      searchKey,
    }) {
      return getAnyList({
        page,
        caipiao_id,
        qihao,
        maQuantity,
        maChu,
        orderField,
        searchKey,
      })
    },
    getBraveList({
      page,
      caipiao_id,
      qihao,
      dan,
      tuo,
      chu,
      searchKey,
      orderField,
    }) {
      return getBraveList({
        page,
        caipiao_id,
        qihao,
        dan,
        tuo,
        chu,
        searchKey,
        orderField,
      })
    },
    getPlanSchemeList(query) {
      return getPlanSchemeList(query)
    },
    onOtherFilterTabChange(e) {
      let index = e.target.dataset.current || e.currentTarget.dataset.current
      switch (index) {
        case '0':
          this.listQuery.orderField = 'chu'
          break
        case '1':
          this.listQuery.orderField = 'cha'
          break
        case '2':
          this.listQuery.orderField = 'yilou_cur'
          break
        case '3':
          this.listQuery.orderField = 'yilou_max'
          break
      }
      this.anyTrigger = !this.anyTrigger
      this.braveTrigger = !this.braveTrigger
    },
    onPlanFilterTabChange(e) {
      this.currentShowPlanSchemIndex = Number(
        e.target.dataset.current || e.currentTarget.dataset.current
      )
    },
    onCateChange(e) {
      this.$set(this.cateChooseList, e.detail.column, e.detail.value)
      this.listQuery.caipiao_id = this.cpCategoryList[0][
        this.cateChooseList[0]
      ].id
      this.listQuery.qihao = this.cpCategoryList[1][
        this.cateChooseList[1]
      ].value
      this.anyTrigger = !this.anyTrigger
      this.braveTrigger = !this.braveTrigger
    },
    onMaColChange(e) {
      console.log(
        '修改的列为：' + e.detail.column + '，值为：' + e.detail.value
      )
      this.maChooseList[e.detail.column] = e.detail.value
      switch (e.detail.column) {
        case 0: //拖动第1列
          switch (
            this.maChooseList[0] //判断第1列是什么
          ) {
            case 7:
              this.maCategoryList[1] = ma8ListConst
              break
            case 6:
              this.maCategoryList[1] = ma7ListConst
              break
            case 5:
              this.maCategoryList[1] = ma6ListConst
              break
            case 4:
              this.maCategoryList[1] = ma5ListConst
              break
            case 3:
              this.maCategoryList[1] = ma4ListConst
              break
            case 2:
              this.maCategoryList[1] = ma3ListConst
              break
            case 1:
              this.maCategoryList[1] = ma2ListConst
              break
            case 0:
              this.maCategoryList[1] = ma1ListConst
              break
          }
          this.maChooseList.splice(1, 1, 0)
          break
      }
      this.listQuery.maChu = this.maCategoryList[1][this.maChooseList[1]].chu
      this.listQuery.maQuantity = this.maCategoryList[0][
        this.maChooseList[0]
      ].maQuantity
      console.log(`- this.listQuery: `, this.listQuery)
      this.anyTrigger = !this.anyTrigger
    },
    onDanColChange: function (e) {
      console.log(
        '修改的列为：' + e.detail.column + '，值为：' + e.detail.value
      )
      this.danChooseList[e.detail.column] = e.detail.value
      switch (e.detail.column) {
        case 1: //拖动第2列
          switch (
            this.danChooseList[1] //判断第2列是什么
          ) {
            case 0:
              this.danCategoryList[2] = tuo4ListConst
              break
            case 1:
              this.danCategoryList[2] = tuo3ListConst
              break
            case 2:
              this.danCategoryList[2] = tuo2ListConst
              break
          }
          this.danChooseList.splice(2, 1, 0)
          break
      }
      this.listQuery.dan = this.danCategoryList[0][this.danChooseList[0]].dan
      this.listQuery.tuo = this.danCategoryList[1][this.danChooseList[1]].tuo
      this.listQuery.chu = this.danCategoryList[2][this.danChooseList[2]].chu
      console.log(`- this.listQuery: `, this.listQuery)
      this.braveTrigger = !this.braveTrigger
    },
    onNumbersChange(numbers) {
      this.listQuery.searchKey =
        numbers && numbers.length > 0 ? numbers.join(',') : undefined
      this.anyTrigger = !this.anyTrigger
      this.braveTrigger = !this.braveTrigger
    },
    onScroll(e) {
      const className = 'fixed'
      const tabIndex = this.tabIndex
      const filter = [
        this.$refs.filter1,
        this.$refs.filter2,
        this.$refs.filter3,
      ][tabIndex]
      const elem = filter.$el
      const scrollTop = e.detail.scrollTop
      const lotteryNumbersCardHeight = this.lotteryNumbersCardHeight
      const pickersFilterBarHeight = this.pickersFilterBarHeight

      const diffHeight =
        tabIndex === 0
          ? lotteryNumbersCardHeight + pickersFilterBarHeight
          : lotteryNumbersCardHeight
      if (scrollTop >= diffHeight) {
        elem.classList.add(className)
      } else {
        elem.classList.remove(className)
      }
    },
    handleCheck(detail) {
      uni.navigateTo({
        url: `/pages/check-number/check-number?p_id=${detail.p_id}`,
      })
    },
    pickRenReds(progress) {
      return progress
        .filter(item => {
          return item.is_red === 1
        })
        .map(item => {
          return item.value
        })
    },
    pickTuoReds(progress) {
      return progress
        .filter(item => {
          return item.is_red === 1
        })
        .map(item => {
          return item.tuo
        })
    },
  },
}
</script>

<style lang="scss" scoped>
.app-container {
  width: 100%;
  height: 100vh;
  background-color: rgba(249, 250, 255, 1);

  .tabs {
    width: 100%;
    flex: 1;
    flex-direction: column;
    padding-top: calc(var(--window-top) + 106upx);
    .inner-card-background {
      position: relative;
      .tab-bar-container {
        width: 100%;
        background-color: #ffffff;
      }
    }
  }
}

.scroll-h {
  width: 100%;
  height: 110upx;
  padding: 24upx 28upx;
  background-color: #ffffff;
  position: fixed;
  top: var(--status-bar-height);
  z-index: 100;
}

.uni-tab-item {
  display: inline-block;
  height: 60upx;
  font-weight: 400;
  line-height: 60upx;
  flex-wrap: nowrap;
  margin-right: 20upx;
}

.uni-tab-item-title {
  height: 40upx;
  line-height: 40upx;
  font-size: 28upx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(113, 128, 138, 1);
  flex-wrap: nowrap;
}

.uni-tab-item-title-active {
  height: 56upx;
  line-height: 56upx;
  font-size: 40upx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(20, 158, 255, 1);
  flex-wrap: nowrap;
}

.search-btn {
  width: 120upx;
  height: 60upx;
  line-height: 60upx;
  color: #333333;
  font-size: 28upx;
  font-family: PingFangSC-Medium, PingFang SC;
}

.create-btn {
  width: 180upx;
  height: 60upx;
  line-height: 60upx;
  background-color: rgba(20, 158, 255, 1);
  background: rgba(20, 158, 255, 1);
  font-size: 28upx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
}

.swiper-box {
  height: calc(100vh - 106upx);
  /* #ifdef H5 */
  height: calc(100vh - var(--window-bottom) - var(--window-top) - 106upx);
  /* #endif */
  /* flex: 1; */
}

.scroll-v {
  width: 750upx;
  height: 100%;
  .lottery-numbers-card-container {
    width: 100%;
    height: 234upx;
    position: relative;
    &::after {
      content: '';
      position: absolute;
      top: 0;
      width: 100%;
      height: 108upx;
      background-color: #ffffff;
      z-index: -1;
    }
    .top-numbers-result {
      margin: 0 auto;
    }
  }

  .filter-tab-bar-container {
    height: 80upx;
  }

  .card-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20upx;
    .programme-card {
      margin-bottom: 20upx;
    }
  }
}

.pickers-filter-bar {
  width: 100%;
  padding: 10upx 28upx;
  .left-area,
  .right-area {
    display: flex;
    align-items: center;
  }
  .picker-suffix-icon {
    display: inline-block;
    height: 28upx;
    margin-left: 22upx;
    line-height: 28upx;
    uni-image {
      width: 22upx;
      height: 28upx;
    }
  }
}

.affix-filter-tab {
  border-top: 1upx solid #e5e5e5;
  border-bottom: 1upx solid #e5e5e5;
  &.fixed {
    position: fixed;
    top: 0;
    z-index: 200;
  }
}

.title-padding {
  &:after {
    content: '';
    background-color: #ffffff;
    width: 100%;
    position: fixed;
    height: var(--status-bar-height);
    top: 0;
    z-index: 1000;
  }
}
</style>
